<template>
    <van-grid 
        :center="true"
        :clickable='false' 
        :column-num="5" 
        icon-size='25px' 
        :border='false' 
        class="navFooter"
        ref="g">
        <van-grid-item 
        class="navItem"

            v-for="(item,index) in itemArr" 
            :key="index"
            :icon="isActive === index ? item.icon[1] : item.icon[0]" 
            :text="item.text" 
            :to="item.to" />
    </van-grid>
    <!-- <div class="clear"></div> -->
</template>
<script>

export default {
    props: ['isActive'],
    setup() {
        const itemArr = [
            {
                text: '首页',
                to: '/',
                icon: [
                    "",
                    ""
                ]
            },
            {
                text: '分类',
                to: '/classify',
                icon: [
                    "",
                    ""
                ]
            },
            {
                text: '发现',
                to: '/community',
                icon: [
                    "",
                    ""
                ]
            },
            {
                text: '购物车',
                to: '/shopping',
                icon: [
                    "",
                    ""
                ]
            },
            {
                text: '我',
                to: '/send',
                icon: [
                    "",
                    undefined
                ]
            }
        ]
        
        return {
            itemArr
        }
    },
    methods:{
        click(){
            console.log('test')
        }
    },
    mounted(){
        const textNodeList = this.$refs.g.$el.querySelectorAll('span')
        textNodeList[this.isActive].classList.add('redText')
    }
}
</script>

<style lang="less" scoped>
    .navFooter {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e3e8ee;
        height: 50px;
        z-index: 10;
        /deep/ .redText {
            color: red;
        }
        /deep/ .van-grid-item__content {
            padding: 0;
        }
        /deep/ .van-grid-item__icon+.van-grid-item__text {
            margin: 0; 
        }
        /deep/ .van-grid-item__text {
            font-size: 12px;
            line-height: 16px;
        }
        /deep/ .van-icon {
            line-height: 1rem;
        }
    }
    
</style>
